<template>
	<view class="content">
		<form @submit="formSubmit">
			<view class="title" style="text-align: center;font-size: large;font-weight: bold;">{{title}}</view>
			<view style="padding-left: 50px;" class="title">组别：</view>
			<radio-group name="groupType">
				<label class="box" v-for="item in array" :key="item.name">
					<text>{{item.name}}</text>
					<radio class="minibox" :value="item.groupType" />
				</label>
			</radio-group>
			<view style="padding-left: 50px;" class="title">参加项目：</view>
			<checkbox-group name="projectsId">
				<label class="box" v-for="item in projects" :key="item.id">
					<checkbox style="border-radius: 50%;" class="minibox" :value="item.id" />
					<text>{{item.name}}</text>
				</label>
			</checkbox-group>


			<view class="uni-form-item uni-column">
				<view class="title">团体编码：</view>
				<input name="schoolCode" type="number" placeholder="请输入团体报名编码" class="uni-input line" />
			</view>

			<view class="uni-form-item uni-column">
				<view class="title">辅导老师：</view>
				<input class="uni-input line" name="teacher" placeholder="请输入辅导员姓名" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">电话：</view>
				<input class="uni-input line" name="phone" placeholder="请输入电话" type="number" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">备注信息：</view>
				<input class="uni-input line" name="ramark" placeholder="请输入备注信息" />
			</view>
			<view class="noticeInfo" @click="look">
				报名注意事项:<text>({{notice}})</text>
			</view>
			<view class="uni-btn-v">
				<button v-show="!flag" form-type="submit" type="primary" @click="baomin">报名</button>
				<button v-show="flag" type="primary" @click="fanhui">返回</button>
			</view>
		</form>
	</view>
</template>
<script>
	
	import {
		competitionSignup,notice} from '../../apis'
	import {
		projects
	} from '../../apis'
	export default {
		data() {
			return {
				array: [{
						name: '小学组',
						groupType: '1'
					}, {
						name: '初中组',
						groupType: '2'
					}, {
						name: '高中组',
						groupType: '3'
					},
					{
						name: '大学组',
						groupType: '4'
					},
					{
						name: '附加组',
						groupType: '5'
					}
				],
				title: '',
				projects: [],
				formData: {},
				competionId: '',
				baominObj: {
					competionId: '',
					groupType: '',
					ramark: '',
					phone: '',
					teacher: '',
					projectsId: '',
					schoolCode: 0
				},
				notice:'',
				flag:false
			}
		},
		onLoad(option) {
			uni.showLoading({
			    title: '加载中'
			});
			this.competionId = option.id
			this.title = option.title
			projects({
				competitionId: option.id
			}).then((res) => {
				let [err, data] = res;
				this.projects = data.data.data;
				// console.log(projects)
			}),
			notice({
				"type":"2"
			}).then((res) => {
				let [err, data] = res;
				 console.log(data.data.data)
				 console.log(data.data.data[0])
				 console.log(data.data.data[0].content)
				this.notice = data.data.data[0].content;
				uni.hideLoading();
			})

		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//this.formData = JSON.stringify(e.detail.value);
				this.formData = e.detail.value
				this.baominObj.competionId = this.competionId;
				this.baominObj.groupType = this.formData.groupType;
				this.baominObj.ramark = this.formData.ramark;
				this.baominObj.phone = this.formData.phone;
				this.baominObj.teacher = this.formData.teacher;
				this.baominObj.projectsId = this.formData.projectsId;
				this.baominObj.schoolCode=this.formData.schoolCode
				 console.log(this.baominObj);

			},
			baomin() {
				//组装表单数据为报名格式
				console.log(this.baominObj);
				competitionSignup({
						"competionId": this.baominObj.competionId,
						"groupType": this.baominObj.groupType,
						"phone": this.baominObj.phone,
						"projectsId": this.baominObj.projectsId,
						"ramark": this.baominObj.ramark,
						"teacher": this.baominObj.teacher,
						"schoolCode":this.baominObj.schoolCode
					}
				).then((res) => {
					let [err, data] = res;
					if (err != null) {
						console.log(err)
						uni.showToast({
							title: '网络错误'
						});
					}
					console.log(data.data)
					if (data.data.code != 200) {
						uni.showToast({
							title: data.data.message,
							image: "../../static/gantan.png"
						});
					}else{
						// uni.switchTab({
						//     url: '../match/match'
						// });
						uni.showToast({
							title: '报名成功',
							icon:'success'
						});
						this.flag = true
					}
				})
			},
			fanhui(){
				uni.switchTab({
				    url: '../match/match'
				});
			},
			look(){
				uni.navigateTo({
					url:'../gonggao/gonggao?number='+2+'&index='+0
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 90%;
		margin: 0 auto;

		.uni-form-item.title,
		.title {
			padding: 20rpx 0;
			font-weight: bold;
		}

		.code {
			border-bottom: 2px solid #F5F5F5;
			padding-bottom: 20px;
		}
		.box{
			display: block;
			position: relative;
			text-align: center;
			margin-bottom: 20px;
			text{
				display: inline-block;
				width: 25%;
			}
			minibox{
				position: absolute;
				margin-left: 10px;
				border-radius: 50%;
			}
			//修改复选框的正方形为圆形
			checkbox .wx-checkbox-input {
				border-radius: 50% !important;
				/* color: #ffffff !important; */
			}
		
			checkbox .wx-checkbox-input.wx-checkbox-input-checked {
				color: #fff;
				background: #4cd964;
			}
		}
		.noticeInfo{
			text{
				color: red;
				width: 73%;
				overflow: hidden;
				display: inline-block;
				height: 20px;
				vertical-align: top;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>
